<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>商品详情</title>
    <link rel="stylesheet" type="text/css" href="../../css/swiper.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <style>
        .godInfo {
            background: #FFF;
            padding: 0.75rem 0.75rem 0.1rem 0.75rem;
        }
        
        .priceInfo {
            padding: 0.25rem 0;
            font-size: 0.6rem;
            color: #adadad;
        }
        
        .priceInfo .price {
            margin: 0 0.5rem 0 0.25rem;
            font-size: 0.8rem;
        }
        
        .coupon {
            position: relative;
        }
        
        .couponInfo {
            position: absolute;
            left: 0;
            top: 0;
            width: 70%;
            height: 100%;
            color: #FFF;
        }
        
        .couponInfo .couponNum {
            font-size: 0.7rem;
            margin-bottom: 0.1rem;
        }
        
        .couponInfo .couponNum span {
            margin: 0 0.15rem;
            font-size: 1.5rem;
            line-height: 1;
        }
        
        .couponInfo .couponDate {
            font-size: 0.5rem;
        }
        
        .productDetail {
            background: #FFF;
            padding-bottom: 0.5rem;
        }
        
        .productDetail .ttl {
            font-size: 0.6rem;
            padding: 0.75rem;
        }
        
        .bytag {
            margin-right: 0.2rem;
            display: inline-block;
            /* color: #FFF; */
            color: #FA7D83;
            border-radius: 0.1rem;
            font-size: 0.6rem;
            padding: 0 0.15rem;
            line-height: 0.6rem;
            vertical-align: middle;
        }
        
        #footer {
            background-color: #FFF;
            height: 2.5rem;
        }
        
        .recommend {
            width: 3rem;
            text-align: center;
        }
        
        .recommend .ico {
            height: 1.2rem;
            background-position: center top;
            background-repeat: no-repeat;
            background-size: auto 100%;
            background-image: url(../../image/mine/guc001.png);
        }
        
        .recommend .ico2 {
            height: 1.2rem;
            background-position: center top;
            background-repeat: no-repeat;
            background-size: auto 100%;
            background-image: url(../../image/mine/kf001.png);
        }
        
        .recommend .txt {
            margin-top: 0.15rem;
            font-size: 0.6rem;
            line-height: 1;
            color: #333;
        }
        
        .recommend .txt:after {
            content: "购物车";
        }
        
        .recommend .txt2 {
            margin-top: 0.15rem;
            font-size: 0.6rem;
            line-height: 1;
            color: #333;
        }
        
        .recommend .txt2:after {
            content: "客服";
        }
        
        .sharebtn {
            text-align: center;
            background-color: #FA7D83;
            height: 2.5rem;
            line-height: 2.5rem;
            color: #FFFFFF;
        }
        
        .kefuBox {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 10;
        }
        
        .kefuBox .content {
            position: relative;
            padding: 0 1rem;
            height: 100vh;
            z-index: 15;
        }
        
        .kefuBox .mo_close {
            width: 1.6rem;
            display: inline-block;
        }
        
        .kefuBox .contentMod {
            background-color: white;
            padding: 1rem;
            text-align: left;
        }
        
        .kefuBox .user {
            margin-bottom: 1.3rem;
        }
        
        .kefuBox .user img:nth-child(1) {
            width: 2.5rem;
            margin-right: 1rem;
            border-radius: 4px;
        }
        
        .kefuBox .code {
            margin: 0 auto;
            width: 40vmin;
            height: 40vmin;
        }
        
        .kefuBox .contentMod p {
            text-align: center;
            margin-top: 1rem;
            font-size: .6rem;
        }
        
        .kefuBox .btn {
            text-align: center;
            padding: .6rem;
            background-color: #E73250;
            border-radius: 100px;
            color: #FFFFFF;
            font-size: .7rem;
        }
        
        .addbtn {
            text-align: center;
            background-color: #E73450;
            height: 2.5rem;
            line-height: 2.5rem;
            color: #FFFFFF;
        }
        
        .sharebtn {
            text-align: center;
            background-color: #FA7D83;
            height: 2.5rem;
            line-height: 2.5rem;
            color: #FFFFFF;
        }
        
        .detailPop .popBox .close {
            position: absolute;
            right: 0;
            top: 0;
            width: 2.15rem;
            height: 2rem;
            background: url(../../image/common/close.png) no-repeat center center;
            background-size: 1rem;
        }
        
        .detailPop .popBox {
            width: 100%;
            max-height: 90%;
            background-color: #FFF;
            bottom: 0;
            left: 0;
            padding: 0 1rem 1rem;
        }
        
        .detailPop .popBox .popHead {
            padding-bottom: 1.2rem;
        }
        
        .detailPop .small {
            width: 4.25rem;
            height: 4.25rem;
            margin-top: -1rem;
            background-color: #FFF;
        }
        
        .detailPop .sizeTit {
            padding: 0.4rem 0;
        }
        
        .detailPop .choice {
            padding-bottom: 0.25rem;
            border-bottom: 1px solid #eee;
        }
        
        .detailPop .choice li {
            color: #353336;
            border-radius: 0.1rem;
            height: 1.4rem;
            line-height: 1.4rem;
            text-align: center;
            padding: 0 0.5rem;
            margin: 0 0.4rem 0.5rem 0.1rem;
            font-size: 0.7rem;
            background-color: #F1F1F1;
            min-width: 3rem;
        }
        
        .detailPop .choice li.outline {
            background-color: #FFF1E5;
            color: #FF8028;
        }
        
        .detailPop .choice li.outline:before {
            border-color: #FFC9AE;
            border-radius: 0.2rem;
        }
        
        .detailPop .choice li.no {
            color: rgba(68, 68, 68, 0.5);
        }
        
        .detailPop .shu {
            min-height: 3rem;
        }
        
        .detailPop .comBtmBtn {
            height: 2.25rem;
        }
        
        .detailPop .price {
            font-weight: normal;
            font-size: 1rem;
            line-height: 1;
            margin-bottom: 0.2rem;
        }
        /* 购物车数量 */
        
        .detailPop .numBox .num {
            text-align: center;
            font-size: 0.6rem;
            color: #333;
            height: 1.5rem;
            line-height: 1.5rem;
            background-color: #f1f1f1;
            margin: 0 1px;
            min-width: 2.5rem;
            padding: 0 0.25rem;
        }
        
        .detailPop .numBox .up,
        .detailPop .numBox .down {
            width: 1.5rem;
            height: 1.5rem;
            font-size: 0.6rem;
            line-height: 1.5rem;
            text-align: center;
            color: #333;
            background-color: #F1F1F1;
        }
        
        .detailPop .scrollBox {
            max-height: 40vh;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
    </style>
</head>

<body>
    <div id="data_html"></div>
    <script type="text/x-dot-template" id="data_tpl">
        <div class="swiper-container mainImg">
            <div class="swiper-wrapper">
                {{ if(it.goods_photos){ }} {{ for(var i in it.goods_photos) { }}
                <div class="swiper-slide"><img src="{{= it.goods_photos[i] }}" width="100%" alt=""></div>
                {{ } }} {{ }else{ }}
                <div class="swiper-slide"><img src="{{= it.goods_cover || '' }}" width="100%" alt=""></div>
                {{ } }}
            </div>
        </div>
        <div class="godInfo">
            <div class="godTitle">
                {{ if( parseInt(it.goods_shipping_price) == 0 ){ }}
                <span class="bytag">包邮</span> {{ } }} {{= it.goods_name || '' }}
            </div>
            <div class="priceInfo aui-flex-col aui-flex-middle font-helvet">
                <div class="color-red price">¥{{= it.goods_sale_price || '0' }}</div>
                <div>¥<del>{{= it.goods_market_price || '0' }}</del></div>
                <div class="flex-auto aui-font-size-10 aui-text-right">库存 {{= getStock() }}件</div>
            </div>
        </div>
        <div style="height:0.5rem;background-color:#f5f5f5;"></div>
        <div class="productDetail">
            <div class="ttl">商品详情</div>
            <div class="htmlDetail aui-px-10">{{= HTMLDecode(it.goods_content) }}</div>
        </div>
    </script>
    <div style="height:2.5rem;"></div>
    <div class="btmFix aui-flex-col aui-flex-middle aui-flex-between aui-border-t" id="footer">
        <div class="recommend" tapmode onclick="openKefu()">
            <div class="ico2"></div>
            <div class="txt2"></div>
        </div>
        <div class="flex-auto addbtn" tapmode onclick="addCart()">
            立即购买
        </div>
        <!-- <a class="flex-auto sharebtn openApp" href="youme://">
            打开app购买
        </a> -->
    </div>

    <div class="kefuBox aui-hide">
        <div class="popOverlay"></div>
        <div class="content aui-flex-row aui-flex-around">
            <div class="aui-text-right">
                <img class="mo_close" src="../../image/common/08.png" tapmode onClick="closeKefu();">
            </div>

            <div class="contentMod">
                <div class="user aui-flex-col aui-flex-middle">
                    <img src="../../image/demo/12.png">
                    <div class="flex-auto">
                        <div class="color-333 aui-font-size-16">有蜜客服 蜜蜜</div>
                        <div class="color-666 aui-font-size-12 aui-padded-t-10">浙江 杭州</div>
                    </div>
                </div>
                <div><img class="code" src="../../image/mine/kefu.png"></div>
                <p>
                    微信扫描上面的二维码，添加客服微信
                </p>
            </div>
        </div>
    </div>
    <div class="wxTipMask aui-hide" onclick="closeWxTip();"></div>

    <div class="detailPop aui-hide">
        <div class="popOverlay" tapmode onClick="closeDetailMask();"></div>
        <div class="popBox" id="detail_html">

        </div>
    </div>
    <script type="text/x-dot-template" id="detail_tpl">
        <div class="popHead aui-flex-col aui-border-b">
            <div class="small aui-border">
                <img src="{{= it.goods_cover || ''}}" width="100%" alt="">
            </div>
            <div class="flex-auto aui-padded-l-15 aui-flex-row aui-flex-middle">
                <div class="price font-helvet">￥<span id="specPrice"></span></div>
                <div class="aui-font-size-13 color-666 aui-ellipsis">已选：<span id="spec"></span></div>
            </div>
            <div class="close" tapmode onclick="closeDetailMask();"></div>
        </div>
        <div class="scrollBox">
            <div class="attrList">
                {{ for(var i in it.attrDatas ) { }}
                <div class="sizeTit aui-font-size-14 color-ad">{{= it.attrDatas[i].attr_name }}</div>
                <ul class="choice aui-flex-col aui-flex-middle" data-spec="{{= it.attrDatas[i].attr_id }}">
                    {{ for(var n in it.attrDatas[i].itemDatas ) { }}
                    <li class="{{= n==0?'outline':''}}" data-specType="{{= it.attrDatas[i].attr_name }}" data-val="{{= it.attrDatas[i].itemDatas[n].item_id }}" tapmode onclick="checkSpec(this);">{{= it.attrDatas[i].itemDatas[n].item_name }}</li>
                    {{ } }}
                </ul>
                {{ } }}
            </div>
            <div class="specList">
                {{ for(var i in it.specDatas ) { }}
                <div class="sizeTit aui-font-size-14 color-ad">{{= it.specDatas[i].spec_name }}</div>
                <ul class="choice aui-flex-col aui-flex-middle" data-spec="{{= it.specDatas[i].spec_id }}">
                    {{ for(var n in it.specDatas[i].itemDatas ) { }}
                    <li class="{{= n==0?'outline':''}}" data-specType="{{= it.specDatas[i].spec_name }}" data-val="{{= it.specDatas[i].itemDatas[n].item_id }}" tapmode onclick="checkSpec(this);">{{= it.specDatas[i].itemDatas[n].item_name }}</li>
                    {{ } }}
                </ul>
                {{ } }}
            </div>
        </div>
        <div class="shu aui-flex-col aui-flex-between aui-flex-middle">
            <div class="aui-font-size-14 color-35">购买数量</div>
            <div class="aui-flex-col aui-flex-middle aui-flex-right numBox">
                <div class="down" tapmode onclick="minus(this);">-</div>
                <div class="num" id="buyNum">1</div>
                <div class="up" tapmode onclick="plus(this);">+</div>
            </div>
        </div>
        <div class="comBtmBtn radius" tapmode onclick="save()">确定</div>
    </script>

</body>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/wx_import.js"></script>
<script type="text/javascript" src="../../script/wx_common.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript">
    var topSwiper;
    var GOD_ID = getUrlParamValue('godId');
    var GOD_INFO;
    var STOCK;

    
var _CART_DATA_ = [];
var GOD_INFO;
var PRICE_DATA;
var CURRENT_SPEC_DATA;
var cartItem;

    getData();

    function getData() {
        $.ajax({
            url: BASE_URL_2 + 'App/Mall/goodsDetail',
            type: 'post',
            dataType: 'json',
            data: {
                goodsId: GOD_ID
            },
            success: function(ret) {
                if (ret && ret.code == 1) {
                    GOD_INFO = ret.data;
                    var tpl = $$('#data_tpl').html();
                    var tempFn = doT.template(tpl);
                    $$('#data_html').html(tempFn(ret.data));
                    
                    //图片切换
                    sliderInit();

                    var tpl = $$('#detail_tpl').html();
                    var tempFn = doT.template(tpl);
                    $$('#detail_html').html(tempFn(ret.data));

                    
                    PRICE_DATA = GOD_INFO.priceData;

                    cartItem = {
                        goods_id: GOD_INFO.goods_id,
                        goods_name: GOD_INFO.goods_name,
                        goods_cover: GOD_INFO.goods_cover,
                        goods_type: GOD_INFO.goods_type,
                        // goods_count: parseInt(goods_count),
                        // goods_unit_price: CURRENT_SPEC_DATA.gp_sale_price,
                        // goods_pay_price: 0,
                        // goods_attr_names: goods_attr_names,
                        // goods_spec_ids: CURRENT_SPEC_DATA.gp_goods_spec_items,
                        // goods_spec_names: $$('#spec').text(),
                        // price_id: CURRENT_SPEC_DATA.gp_id
                    }


                    setTimeout(function(){
                        checkSpecPrice();
                    },50);
                }
            }
        });
    }

    function sliderInit() {
        topSwiper = new Swiper('.mainImg', {
            speed: 600,
            autoplay: false
        });
    }
    //计算总库存
    function getStock() {
        STOCK = 0;
        for (var i = 0; i < GOD_INFO.priceData.length; i++) {
            STOCK += parseInt(GOD_INFO.priceData[i].gp_stock);
        }
        return STOCK;
    }
    //跳转app购买
    $('.openApp').click(function() {
        var ua = navigator.userAgent.toLowerCase();
        var isWeixin = ua.indexOf('micromessenger') != -1;
        if (isWeixin) {
            $('.wxTipMask').removeClass('aui-hide');
            return false;
        }
    });

    function closeWxTip() {
        $('.wxTipMask').addClass('aui-hide');
    }

    //客服
    function openKefu() {
        $$('.kefuBox').removeClass('aui-hide');
    }

    function closeKefu() {
        $$('.kefuBox').addClass('aui-hide');
    }


    //打开规格弹窗
    function addCart() {
        $('.detailPop').removeClass('aui-hide');
    }
    function closeDetailMask(){
        $('.detailPop').addClass('aui-hide');
    }

    //选择规格
    function checkSpec(el){
        var _this = $$(el);
        if (!_this.hasClass('outline')){
            _this.addClass("outline").siblings().removeClass("outline");
            checkSpecPrice();
        }
    }
    function checkSpecPrice(){
        var specIdArr = [];
        var specIdArrStr = '';
        var specNameArr = [];
        var specNameArrStr = '';
        var attrIdArr = [];
        var attrIdArrStr = '';
        var attrNameArr = [];
        var attrNameArrStr = '';
        $$('.attrList .choice .outline').each(function(){
            var attrId = $$(this).data('val');
            var attrVal = $$(this).data('specType') + ':' + $$(this).text();
            attrIdArr.push(attrId);
            attrNameArr.push(attrVal);
        });
        $$('.specList .choice .outline').each(function(){
            var specId = $$(this).data('val');
            var specVal = $$(this).data('specType') + ':' + $$(this).text();
            specIdArr.push(specId);
            specNameArr.push(specVal);
        });
        specIdArrStr = specIdArr.join(",");
        specNameArr = specNameArr.join(",");
        attrIdArrStr = attrIdArr.join(",");
        attrNameArrStr = attrNameArr.join(",");

        for(var i=0;i<PRICE_DATA.length;i++){
            if(PRICE_DATA[i].gp_goods_spec_items == specIdArrStr){
                CURRENT_SPEC_DATA = PRICE_DATA[i];
            }
        }
        cartItem.goods_spec_ids = specIdArrStr;
        cartItem.goods_spec_names = specNameArr;
        cartItem.goods_attr_ids = attrIdArrStr;
        cartItem.goods_attr_names = attrNameArrStr;
        cartItem.goods_unit_price = CURRENT_SPEC_DATA.gp_sale_price;
        cartItem.price_id = CURRENT_SPEC_DATA.gp_id;

        $$('#spec').text(attrNameArrStr + specNameArr);
        $$('#specPrice').text(CURRENT_SPEC_DATA.gp_sale_price);
    }
    //加减
    function minus(el){
        var numBox = $$(el).parents('.numBox');
        var num = parseInt(numBox.find('.num').text());
        num--;
        num = num<1 ? 1 : num;
        numBox.find('.num').text(num);
    }
    function plus(el){
        var numBox = $$(el).parents('.numBox');
        var num = parseInt(numBox.find('.num').text());
        num++;
        numBox.find('.num').text(num);
    }
    
   
    //加入购物车
    function save(){
        
        var discount = 0;
        //var vip = getUserVip();
        var vip = 2;
        switch (vip) {
            case 1:
                discount = 0;
                break;
            case 2:
                discount = CURRENT_SPEC_DATA.gp_vip_discount;
                break;
            case 3:
                discount = CURRENT_SPEC_DATA.gp_op_discount;
                break;
            case 4:
                discount = CURRENT_SPEC_DATA.gp_sup_discount;
                break;
        
            default:
                break;
        }
        
        //拼接 加入购物车的 对象
        var goods_count = $$('#buyNum').text();

        cartItem.goods_count = parseInt(goods_count);
        cartItem.discount = 1-(discount/100);
        cartItem.goods_pay_price = cartItem.discount * cartItem.goods_unit_price;

        var isHave = false;
        for(var i=0;i<_CART_DATA_.length;i++){
            if( _CART_DATA_[i].price_id == cartItem.price_id ){
                isHave = true;
                _CART_DATA_[i].goods_count = parseInt(_CART_DATA_[i].goods_count) + parseInt(cartItem.goods_count);
            }
        }
        if(!isHave){
            _CART_DATA_.push(cartItem);
        }

        var _CONFIRM_DATA_ = {
            data: _CART_DATA_,
            count: cartItem.goods_count,
            totalPrice: cartItem.goods_pay_price * cartItem.goods_count
        };
        $api.setStorage('_CONFIRM_DATA_', _CONFIRM_DATA_);
        openWin('confirm.html');
       
        
    }
</script>

</html>